<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<style>
			video{
				 width: 100%;
				 z-index: 1;
				 opacity: 120%;
			}
			.mainBody{
				width: 40%;
				height: 35%;
				position: absolute;
				background-color:rgba(255,255,255,0.4);
				margin: 0 auto;
				z-index: 999;
				top: 27%;
				left: 30%;
				display: flex;
				flex-direction: row;
				border-radius: 10px;
			}
			.left_parent{
				width: 50%;
				height: 100%;
				text-align: center;
				padding: 5px;
			}
			.left_parent div{
				text-align: center;
				margin-top: 5px;
			}
			.right_parent{
				width: 50%;
				height: 100%;
				background-color: rgba(245,253,249,0.35);
				border-radius: 10px;
			}
			.right_child{
				text-align: center;
				margin-top: 20px;
			}
			.right_checkbox{
				width: 200px;
				margin: 0 auto;
				opacity: 0.7;
				display: flex;
				flex-direction: row;
				margin-left: 170px;
				margin-top: 10px;
			}
			.login_btn{
				background-color: #2EC154;
				width: 200px;
				opacity: 0.6;
				font-size: 15px;
				outline: none;
				margin-top: 10px;
			}
			.forget_a{
				text-align: center;
				margin: 0 auto;
				outline: none;
				color:#F5FDF9;
				font-size: 10px;
				margin-top: 40px;
			}
		</style>
	</head>
	
	<body style="margin: 0;padding: 0;">
		<!-- 背景部分 -->
		<video  autoplay="autoplay" muted="muted" loop="loop">
			<source th:src="@{/img/loginBack.mp4}"></source>
		</video>
		<!-- 主体部分 -->
		<div class="mainBody">
			<!-- 左部分 -->
			<div class="left_parent">
				<div >
					<img th:src="@{/img/building.png}" width="100%" style="opacity: 0.6;"/>
				</div>
				
			</div>
			<!-- 右部分 -->
			<div class="right_parent">
				<div class="right_child">
					<form method="post" th:action="@{/user/to_login}">
					<div><img th:src="@{/img/shopName.png}" width="60%"style="opacity: 0.7;"/></div>
					   <span style="color: red" th:text="${ps_tip}"></span>
						<div class="input-group"style="width: 200px;margin: 0 auto;margin-top: 10px;opacity: 0.7;">
						    <span class="input-group-addon">
								<img th:src="@{/img/user.png}" width="20px"/>
							</span>
						    <input type="text" name="username" class="form-control" placeholder="请输入用户账号">
						</div>
						<br />
						<div class="input-group"style="width: 200px;margin: 0 auto;opacity: 0.7;">
						    <span class="input-group-addon">
								<img th:src="@{/img/password.png}" width="20px"/>
							</span>
						    <input type="password" name="password" class="form-control" placeholder="请输入用户密码">
						</div>
					<div style="display: flex;flex-direction: row;margin-top: 10px;margin-left: 70px;">
						<div style="margin-right: 10px;">
							<a class="forget_a" th:href="@{/user/register}">点击这里注册</a>
						</div>
						<input type="checkbox" />
						<div>记住密码</div>
					</div>
						
						<input type="submit" class="btn btn-success login_btn" value="登 陆"/>
						<br />
						<div style="margin-top: 10px;">
							<a class="forget_a">忘记密码？请点击这里</a>
						</div>
					</form>
				</div>
			</div>
		</div>
	</body>
</html>
